<script setup lang="ts">
import { getUserInfoAPI } from '@/api/login'
import { useUserStore } from '@/stores/counter'
import type { userInfo } from '@/types/login'
import { ChatDotRound, DocumentCopy, House } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const UserInfo = ref<userInfo>()
const store = useUserStore()
const router = useRouter()
const Loyout = () => {
  ElMessageBox.confirm('您确定要退出登录吗？', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    store.clearToken()
    router.push('/login')
    ElMessage.success('退出成功')
  })
}

onMounted(() => {
  getUserInfoAPI().then((res) => {
    // console.log(res)
    UserInfo.value = res.data
  })
})
</script>

<template>
  <el-container>
    <el-aside>
      <img src="../../assets/images/logo.png" alt="" />
      <el-menu
        background-color="#002232"
        text-color="#fff"
        active-text-color="#fc6627"
        style="border: none"
        router
      >
        <el-menu-item index="/"
          ><el-icon><House /></el-icon>概览页面</el-menu-item
        >
        <el-menu-item index="/article"
          ><el-icon><ChatDotRound /></el-icon>文章管理</el-menu-item
        >
        <el-menu-item index="/publish"
          ><el-icon><DocumentCopy /></el-icon>发布文章</el-menu-item
        >
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div>{{ UserInfo?.name }} {{ UserInfo?.mobile }}</div>
        <el-link :underline="false" @click="Loyout">退出</el-link>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
/* 样式 */
.el-header {
  display: flex;
  justify-content: end;
  align-items: center;
  border-bottom: 1px solid #c8c8c8;
  gap: 10px;
}
.el-aside {
  width: 220px;
  height: 100vh;
  background-color: #002232;
}
.el-aside img {
  width: 100%;
}
</style>
